<template>
    <div class="container">
      <ul class="profile">
        <li class="pro-list">
          <button @click="choice($event,'/profile')">
            <img :src="pic.pic1">
          </button>
        </li>
        <li class="pro-list">
          <button @click="choice($event,'/project')">
            <img :src="pic.pic2">
          </button>
        </li>
        <li class="pro-list">
          <button @click="choice($event,'/note')">
            <img :src="pic.pic3">
          </button>
        </li>
      </ul>
    </div>
</template>

<script>
    import pic1 from '@/assets/image/56cab3c10ff78_1024_05.jpg'
    import pic2 from '@/assets/image/56cab3c10ff78_1024_06.jpg'
    import pic3 from '@/assets/image/56cab3c10ff78_1024_07.jpg'
    export default {
        name: "index",
      data(){
          return{
            pic:{
              pic1:pic1,
              pic2:pic2,
              pic3:pic3
            }
          }
      },
      mounted(){
        let that=this;
        this.$nextTick(function() {
          that.show();
        })
      },
      methods:{
        show(){
          $('.pro-list').eq(0).animate({marginTop:0},1000)
          $('.pro-list').eq(1).animate({marginTop:0},1500)
          $('.pro-list').eq(2).animate({marginTop:0},2000)
        },
        choice(e,url){
          let that = this
          e.preventDefault();
          e.target.parentNode.style.transform='scale3d(0,0,0)'
          e.target.parentNode.style.transition='1s'
          $('.pro-list button').attr("disabled",true)
          $('.container').fadeOut(1500)
          setTimeout(()=>{
              that.$router.push(url)
          },1000)
        }
      }
    }
</script>

<style scoped>
  .container{
    width: 100%;
    height: 100vh;
    background: #EAE6DC;
    border-top: 1px solid #EAE6DC;
    /*margin-top: -100%;*/
  }
  .container::-webkit-scrollbar{
    display: none;
  }
  ul{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 80%;
    margin-top: 10vh;
    text-align: center;
    position: relative;
  }
  ul::-webkit-scrollbar{
    display: none;
  }
  ul li{
    list-style: none;
  }
  ul li::-webkit-scrollbar{
    display: none;
  }
  .pro-list{
    width: 33%;
    margin-top: 100vh;
    overflow: hidden;
    display: flex;
    align-items:center;
    text-align: center;
    position: relative;
  }
  .pro-list button{
    border: none;
    outline: none;
  }
  .pro-list img{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }
  .pro-list img:hover,.pro-list img:active{
    filter: drop-shadow(16px 16px 20px #aaa);
    transition: 0.5s;
  }
  .pro-list::-webkit-scrollbar{
     display: none;
   }
</style>
